<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>canvas</title>
  </head>
  <body>
    <!--
      1. 准备一个具备宽高的canvas
        canvas本身并不具备绘图能力，只是一个画布
        绘制的内容由js来控制
    -->
    <canvas id="charts" width="800" height="400"></canvas>
    <script>
      // 2. 获取画笔
      const charts = document.getElementById('charts')
      const ctx = charts.getContext('2d')

      // ctx.fillRect(100, 100, 300, 200)
      ctx.strokeRect(100, 100, 200, 200)
    </script>
  </body>
</html>
